[APM] Serverless Onboarding with Custom Tutorials #158228

achyutjhunjhunwala · 2023-05-23T07:18:58Z

Summary

PR adds Serverless Onboarding flow using Custom Integration. This would also lay the foundation for us to complete get rid of Home Tutorial App and move the remaining onPrem and cloud tutorials which are currently still loaded using Home Tutorial App.

Adds new Custom Integration for Serverless Onboarding (Toggling Home AApp Tutorial Integration)
Since we are migrating away from the Home App Tutorials, lot of existing code has been duplicated and refactored for the custom implementation. Home App Tutorial would require the Server to register all the steps and the client to only register a custom component which then would be loaded by Home App Tutorial component. We don't need to follow this approach any more. All the UX logic has now been moved to the Public folder with only Custom Integration done on the server/plugin.ts.
As we are not sure how the solutions will be informed about being running on Serverless or not, I have introduced a new variable in serverless.oblt.yml file called xpack.apm.serverlessOnboarding: true. With this the development has been done. This can be changed to actual logic once we know more.
A new configuration xpack.apm.managedServiceUrl for accessing Managed Service URL is also being added by Control Plane team as part of https://elasticco.atlassian.net/browse/CP-2403. Hence this PR expects this property to be present for Serverless.
Unit tests to toggle between secret_token and api_key depending on availability has been added. No API Tests were added as no new API created. Cypress Tests cannot be added due to Serverless

Need help reviewing the PR ?

config/serverless.oblt.yml - Adds the new flag which would enable this flow
x-pack/plugins/apm/common/tutorial/tutorials.ts - Defines the configuration required to register the APM's Tutorial Custom Integration
x-pack/plugins/apm/public/components/app/tutorials/commands - This directory contains all the agent specific data required to load the TABLE with settings required for configuring APM MIS.
x-pack/plugins/apm/public/components/app/tutorials/instructions - This folder contains all the individual agent specific instructions in the format used by EuiSteps
x-pack/plugins/apm/public/components/routing - Here we register our custom route
Changes on the server side a quite small and they only register the custom integration.
x-pack/plugins/apm/public/components/app/tutorials/serverless_instructions.tsx - This file currently defines all the logic for registering Serverless instructions. We will soon have similar files for onPrem and cloud instructions

Risk Matrix

Risk	Probability	Severity	Mitigation/Notes
The flow depends on presence of a flag in `kibana.yml` file.	Low	High	By default this flow will be disabled and would fallback to traditional onboarding in absence of the flag.

Demo

Screen.Recording.2023-05-30.at.15.48.05.mov

Updated Demo with Create API Button inside the table

Screen.Recording.2023-05-31.at.12.26.26.mov

apmmachine · 2023-05-23T07:19:15Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

…-ref HEAD~1..HEAD --fix'

…fix'

sorenlouv · 2023-05-23T07:36:57Z

/oblt-deploy

x-pack/plugins/apm/public/components/app/tutorials/agent_config_instructions.tsx

x-pack/plugins/apm/public/components/app/tutorials/commands/node.ts

x-pack/plugins/apm/public/components/app/tutorials/agent_config_instructions.tsx

x-pack/plugins/apm/public/components/app/tutorials/agent_config_table.tsx

…-ref HEAD~1..HEAD --fix'

achyutjhunjhunwala · 2023-06-06T11:28:15Z

Can you cover the tutorials with api and/or e2e tests?

@sqren Unfortunately not at this moment

API Tests - We haven't introduced any new APIs as part of it. Re-using existing one which are already covered.
E2E - We still are not clear how these tests would load for Cypress given the same challenges with Synthtrace which @kpatticha is struggling with. I believe once we have a clear path with Serverless tests or once we start adding onPrem and cloud scenarios, then it would be much easier

sorenlouv · 2023-06-06T11:42:24Z

E2E - We still are not clear how these tests would load for Cypress given the same challenges with Synthtrace which @kpatticha is struggling with. I believe once we have a clear path with Serverless tests or once we start adding onPrem and cloud scenarios, then it would be much easier

Ah, bummer. Is there nothing we can do to access the new onboarding from the existing e2e setup? What if you set the needed serverless feature flag configs in the cypress config?

achyutjhunjhunwala · 2023-06-06T11:43:53Z

@legrego Based on the discussion here, we have gated the 2 exposed configurations which were exposed to the browsers. After that i am seeing that the build has started failing. Can you have a look and help me here as to what could cause this ?

legrego · 2023-06-06T11:55:34Z

@achyutjhunjhunwala,

Based on the discussion #158228, we have gated the 2 exposed configurations which were exposed to the browsers.

Excellent, thank you!

After that i am seeing that the build has started failing. Can you have a look and help me here as to what could cause this ?

If you look at the failing test output, you'll see the following:

Error: Actual config settings exposed to the browser do not match what is expected; this assertion fails if extra settings are present and/or expected settings are missing
    at Assertion.assert (expect.js:100:11)
    at Assertion.eql (expect.js:244:8)
    at Context.<anonymous> (rendering.ts:267:37)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Object.apply (wrap_function.js:73:16) {
  actual: '{\n' +
    '  "extra": [\n' +
    '    "xpack.apm.managedServiceUrl (any)"\n' +
    '  ]\n' +
    '  "missing": [\n' +
    '    "xpack.apm.managedServiceUrl (string)"\n' +
    '    "xpack.apm.serverlessOnboarding (boolean)"\n' +
    '  ]\n' +
    '}',
  expected: '{\n  "extra": []\n  "missing": []\n}',
  showDiff: true
}

You'll need to revert the changes made to test/plugin_functional/test_suites/core_plugins/rendering.ts to remove the config settings that are no longer exposed.

kpatticha · 2023-06-06T11:59:21Z

E2E - We still are not clear how these tests would load for Cypress given the same challenges with Synthtrace which @kpatticha is struggling with. I believe once we have a clear path with Serverless tests or once we start adding onPrem and cloud scenarios, then it would be much easier

Do we need data in order to test the on boarding?

achyutjhunjhunwala · 2023-06-06T12:56:36Z

E2E - We still are not clear how these tests would load for Cypress given the same challenges with Synthtrace which @kpatticha is struggling with. I believe once we have a clear path with Serverless tests or once we start adding onPrem and cloud scenarios, then it would be much easier

Ah, bummer. Is there nothing we can do to access the new onboarding from the existing e2e setup? What if you set the needed serverless feature flag configs in the cypress config?

That's actually an interesting point. The route is registered irrespective of serverless/non serverless mode. Its only custom integration which will not get registered. In that case, with our regular cypress suite we should be able to test it. Thank you for the hint. I will play with it 👍🏼

@sqren I am also working on creating a follow up PR where i will add the Agent Status check which we discussed here.

This PR is getting huge and i am any how creating a follow up PR immediately, is it fine to add cy test there ?

achyutjhunjhunwala · 2023-06-06T12:57:30Z

E2E - We still are not clear how these tests would load for Cypress given the same challenges with Synthtrace which @kpatticha is struggling with. I believe once we have a clear path with Serverless tests or once we start adding onPrem and cloud scenarios, then it would be much easier

Do we need data in order to test the on boarding?

Nope, what i meant was to identify if we are in Serverless Mode for custom integration. But looks like we don't need this check

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

x-pack/plugins/apm/public/components/routing/templates/no_data_config.ts

sorenlouv · 2023-06-07T12:42:41Z

x-pack/plugins/apm/server/routes/apm_routes/register_apm_server_routes.ts

@@ -181,6 +182,7 @@ export function registerRoutes({

        if (Boom.isBoom(error)) {
          opts.statusCode = error.output.statusCode;
+          opts.body.attributes.data = error?.data;


We should be careful about exposing error details (like the stack trace) to the client. I'm not sure if that's the case here.

This is a custom property where only intended data can be exposed. It will not expose stack trace. For example -

throw Boom.internal(error, { missingPrivileges }, 403);

In this case, the missingPrivileges is what will be available here.

sorenlouv

lgtm. Just a few nits.

kibana-ci · 2023-06-07T14:20:51Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 673aa18

Failed CI Steps

APM Cypress Tests elastic/observability-dev#4

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1370	1402	+32

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`apm`	44	46	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`apm`	3.5MB	3.6MB	+46.3KB

Unknown metric groups

API count

id	before	after	diff
`apm`	44	46	+2

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	19	21	+2
`securitySolution`	413	417	+4
total			+6

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	20	22	+2
`securitySolution`	497	501	+4
total			+6

History

💛 Build #133205 was flaky 7011da3
💚 Build #133053 succeeded 9d2e19d
💛 Build #132953 was flaky a3ce70e
💔 Build #132870 failed c575f4f
💔 Build #132812 failed e49df74
💚 Build #132573 succeeded 8d8a640

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @achyutjhunjhunwala

Add first version of custom tutorials

0e3333d

achyutjhunjhunwala self-assigned this May 23, 2023

achyutjhunjhunwala added release_note:feature Makes this part of the condensed release notes Team:APM All issues that need APM UI Team support labels May 23, 2023

kibanamachine added 2 commits May 23, 2023 07:24

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

bfe6d2b

…-ref HEAD~1..HEAD --fix'

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

780db1b

…fix'

achyutjhunjhunwala added 4 commits May 23, 2023 09:53

Merge branch 'main' into serverless-onboarding-with-custom-tutorials

c4ad1c3

Add more unit tests and fix checktypes for i18n

571af0e

Merge branch 'main' into serverless-onboarding-with-custom-tutorials

47baf75

Fix custom integrations typings for start and setup dependencies

e56825b